<template>
  <div class="main">
    <div class="home_content">
      <div class="search">
        <img src="../../assets/images/home/search.png" alt="" />
        <input
          type="text"
          v-model="searchValue"
          :placeholder="t('请输入搜索内容')"
        />
        <button class="btnsearch" @click="serachGoods()">
          {{ t("搜索") }}
        </button>
      </div>
      <div class="banner">
        <el-carousel :interval="5000" arrow="always" height="956px">
          <el-carousel-item v-for="(item, index) in swiper_list" :key="index">
            <el-image
              class="banner-img"
              :src="item.banner_image | imgSrc"
              @click="goclassfig(item, index)"
              fit="contain"
            ></el-image>
          </el-carousel-item>
        </el-carousel>
        <div class="txt">
          <h3 class="title">{{ t("一起打开暖冬惊喜!") }}</h3>
          <p class="hint">{{ t("献给喜爱过节的朋友") }}</p>
          <router-link to="electronics" tag="div" class="btncheck">
            <p>{{ t("立即选购") }}</p>
          </router-link>
        </div>
      </div>
      <div class="cooperation">
        <img
          src="../../assets/images/home/bg-left.png"
          alt=""
          class="left"
          @click="leftbtn()"
        />
        <div class="imgs">
          <ul class="imgs-ul" ref="imgs">
            <li
              class="imgs-li"
              ref="img"
              v-for="(item, index) in list2"
              :key="index"
            >
              <!-- <router-link class="imgs-link" to="joint" tag="img"  :src="item.image | imgSrc"></router-link> -->
              <router-link
                class="imgs-link"
                :to="{ name: 'electronics', params: { searchKey: '' } }"
                tag="img"
                :src="item.image | imgSrc"
              ></router-link>
            </li>
          </ul>
        </div>
        <img
          src="../../assets/images/home/bg-right.png"
          alt=""
          class="right"
          @click="rightbtn()"
        />
      </div>
      <div class="choiceness">
        <h2 class="title">
          {{ t("精选系列") }}
        </h2>
        <ul style="height: 950px">
          <li class="choiceness_details" v-for="item in list3" :key="item.id">
            <img :src="item.image | imgSrc" alt="" />
            <p class="choiceness_details-txt">{{ item.name }}</p>
            <!-- <router-link to="choiceness" tag="button">{{ t('立即选购') }}</router-link> -->
            <router-link
              :to="{
                path: '/choiceness',
                query: { searchKey: '', id: item.id },
              }"
              tag="button"
              >{{ t("立即选购") }}</router-link
            >
          </li>
        </ul>
      </div>
      <div class="bigbanner">
        <img src="../../assets/images/home/banner.png" alt="" />
        <div class="bannertxt">
          <h2>{{ t("完美搭配 独显风格") }}</h2>
          <button @click="gomountings">{{ t("立即选购") }}</button>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="choicenesstwo">
        <h2 class="title">
          {{ t("精选系列") }}
        </h2>
        <div class="ctcon" ref="ctcons">
          <ul ref="ctcon">
            <li
              style="width: 407px; height: 507px; margin-right: 26px"
              v-for="item in list4"
              :key="item.id"
              :style="{ width: ctwidth + 'px' }"
              @click="gogode(item.id)"
            >
              <img
                :src="item.thumbnail | imgSrc"
                alt=""
                style="width: 407px; height: 407px"
              />
              <p
                style="
                  text-align: center;
                  font-weight: 500;
                  font-size: 20px;
                  color: #000000;
                  margin: 38px 0 74px 0;
                "
              >
                {{ item.title }}
              </p>
            </li>
          </ul>
          <div class="left" @click="cntleft()">
            <img src="../../assets/images/home/bg-left.png" alt="" />
          </div>
          <div class="right" @click="cntright()">
            <img src="../../assets/images/home/bg-right.png" alt="" />
          </div>
        </div>
      </div>
      <el-divider class="wire"></el-divider>
      <div class="hot">
        <h2 class="title">
          {{ t("热销款式") }}
        </h2>
        <div class="hotcon" ref="htcons">
          <ul ref="htcon">
            <li
              style="width: 545px; height: 727px; margin-right: 32px"
              v-for="item in list5"
              :key="item.id"
              :style="{ width: hotwidth + 'px' }"
              @click="gogode(item.id)"
            >
              <img
                :src="item.thumbnail | imgSrc"
                alt=""
                style="width: 545px; height: 545px"
                :style="{ width: hotwidth + 'px' }"
              />
              <p
                style="
                  text-align: center;
                  font-weight: 500;
                  font-size: 20px;
                  color: #000000;
                  margin: 59px 0 64px 0;
                "
              >
                {{ item.title }}
              </p>
            </li>
          </ul>
          <div class="left" @click="hotleft()">
            <img src="../../assets/images/home/bg-left.png" alt="" />
          </div>
          <div class="right" @click="hotright()">
            <img src="../../assets/images/home/bg-right.png" alt="" />
          </div>
        </div>
      </div>
      <el-divider class="wire"></el-divider>
      <div class="art">
        <h2 class="title">
          {{ t("艺术系列") }}
        </h2>
        <div class="artcons" ref="artcons">
          <ul ref="artcon">
            <li
              class="choicenesstwo_details"
              v-for="item in list6"
              :key="item.id"
              style="width: 545px; height: 753px; margin-right: 47px"
            >
              <img
                :src="item.image | imgSrc"
                alt=""
                style="width: 100%; height: 100%"
              />
              <button @click="goartdetail(item)">{{ t("立即选购") }}</button>
            </li>
          </ul>
        </div>
        <div class="left" @click="artleft()">
          <img src="../../assets/images/home/bg-left.png" alt="" />
        </div>
        <div class="right" @click="artright()">
          <img src="../../assets/images/home/bg-right.png" alt="" />
        </div>
      </div>
    </div>
    <div class="pop">
      <el-dialog :visible.sync="dialogFormVisible" center width="70%">
        <el-form :model="form">
          <h3
            style="
              text-align: center;
              font-size: 42px;
              color: #000;
              margin: 50px 0 100px;
            "
          >
            立即加入MAXCASE！
          </h3>
          <el-form-item>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="绑定手机号" name="first">
                <div class="tabCont">
                  <input
                    type="text"
                    v-model="phone"
                    placeholder="请输入手机号"
                  />
                </div>
              </el-tab-pane>
              <el-tab-pane label="绑定邮箱登录" name="second">
                <div class="tabCont">
                  <input
                    type="text"
                    v-model="email"
                    placeholder="请输入邮箱账号"
                  />
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">{{
            t("确 定")
          }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import headerView from '../../components/headerView.vue'
import {
  test,
  getCatList,
  getSysMsgDetail,
  getBannerList,
  getHomeUserWorksList,
  getConcentrationList,
  getTopSalesGoodsList,
  getOneChoice,
} from "@/utils/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    // headerView
  },
  data() {
    //这里存放数据
    return {
      swiper_list: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      imgwidth: "",
      ctwidth: "",
      hotwidth: "",
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      activeName: "first",
      phone: "",
      email: "",
      password: "",
      searchValue: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`首页.${v}`);
    },
    //  跳转到艺术详情
    goartdetail(item) {
      console.log("-----商品的选项", item);
      this.$router.push({
        name: "artdetail",
        query: {
          goods_id: item.id,
        },
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    rightbtn() {
      this.utils.right(this.$refs.imgs);
    },
    leftbtn() {
      this.utils.left(this.$refs.imgs);
    },
    cntright() {
      this.utils.right(this.$refs.ctcon, this.$refs.ctcons);
    },
    cntleft() {
      this.utils.left(this.$refs.ctcon);
    },
    hotright() {
      this.utils.right(this.$refs.htcon, this.$refs.htcons);
    },
    hotleft() {
      this.utils.left(this.$refs.htcon);
    },
    artright() {
      this.utils.right(this.$refs.artcon, this.$refs.artcons);
    },
    artleft() {
      this.utils.left(this.$refs.artcon);
    },
    //
    gomountings() {
      this.$router.push({
        name: "mountings",
      });
      // this.$router.push("mountings");
    },
    // 轮播图跳转
    goclassfig(item, index) {
      // this.$router.push({
      //     name: "electronics",
      //     params: {
      //         searchKey: ""
      //     }
      // });
      if (index == 0) {
        this.$router.push({
          name: "swiperdetails",
          query: {
            categoryId: 20, //item.category_id
          },
        });
      } else if (index == 1) {
        this.$router.push({
          name: "joint",
          query: {
            categoryId: item.category_id,
          },
        });
      } else if (index == 2) {
        this.$router.push({
          name: "swiperdetails",
          query: {
            categoryId: item.category_id,
          },
        });
      }
      // if (id == 1) {
      //     this.$router.push("swiperdetails");
      // } else if (id == 2) {
      //     this.$router.push("joint");
      // } else {
      //     this.$router.push("mountings");
      // }
    },
    // 跳转详情页
    gogode(id) {
      this.$router.push({ path: "goodsdetails", query: { goods_id: id } });
    },
    /**
     * 搜索商品 跳转商品列表
     */
    serachGoods() {
      this.$router.push({
        name: "electronics",
        params: {
          searchKey: this.searchValue,
        },
      });
    },
    load() {},
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    test().then((res) => {});
    // getSysMsgDetail()
    getCatList().then((res) => {
      if (res.code == 1) {
        this.list2 = res.data;
      }
    });
    getBannerList().then((res) => {
      if (res.code == 1) {
        this.swiper_list = res.data;
      }
    });
    getOneChoice().then((res) => {
      if (res.code == 1) {
        this.list3 = res.data;
      }
    });
    getConcentrationList().then((res) => {
      if (res.code == 1) {
        this.list4 = res.data.data.slice(0, 3);
      }
    });
    getTopSalesGoodsList().then((res) => {
      if (res.code == 1) {
        this.list5 = res.data.data.slice(0, 3);
      }
    });
    getHomeUserWorksList().then((res) => {
      if (res.code == 1) {
        this.list6 = res.data.data.slice(0, 3);
      }
    });
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    const _this = this;
    window.onload = function () {
      _this.imgwidth = _this.$refs.imgs.offsetWidth / 5 - 17;
      _this.ctwidth = _this.$refs.ctcons.offsetWidth / 4 - 26;
      _this.hotwidth = _this.$refs.ctcons.offsetWidth / 3 - 20;
    };

    window.onresize = function () {
      if (_this.$refs.imgs) {
        _this.imgwidth = _this.$refs.imgs.offsetWidth / 5 - 17;
      }
      if (_this.$refs.ctcons) {
        _this.ctwidth = _this.$refs.ctcons.offsetWidth / 4 - 26;
        _this.hotwidth = _this.$refs.ctcons.offsetWidth / 3 - 20;
      }
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  .home_content {
    box-sizing: border-box;
    margin: 0px 105px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;

    .search {
      width: 1000px;
      height: 60px;
      background: #f9f9f9;
      border: 1px solid #f1f1f1;
      box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);
      border-radius: 30px;
      margin: 30px 0px;
      overflow: hidden;
      display: flex;
      align-items: center;

      img {
        width: 25px;
        height: 25px;
        margin-left: 10px;
      }

      input {
        width: 82%;
        height: 100%;
        outline: none;
        border: 0;
        background-color: transparent;
        text-indent: 2em;
        font-size: 20px;
        font-weight: 400;
        color: #999999;
      }

      .btnsearch {
        width: 150px;
        height: 54px;
        background: #ff5757;
        border-radius: 30px;
        font-size: 20px;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 54px;
        border: 0;
        outline: 0;
      }
    }

    .banner {
      box-sizing: border-box;
      width: 1700px;
      margin-bottom: 20px;

      .banner-img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

      .txt {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column wrap;
        margin-top: 39px;

        .title {
          font-size: 40px;
          font-weight: bold;
          color: #000000;
          line-height: 38px;
        }

        .hint {
          font-size: 18px;
          font-weight: 400;
          color: #999999;
          margin: 16px 0px;
        }

        .btncheck {
          display: flex;
          justify-content: center;
          padding-bottom: 20px;

          p {
            width: 100px;
            height: 40px;
            background: #ff5757;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            color: #fff;
          }
        }
      }

      .el-carousel__container {
        width: 100%;
      }

      .el-carousel__arrow {
        width: 85px;
        height: 85px;
        font-size: 35px;
        font-weight: 600;
      }

      .el-carousel__button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #999;
      }
    }

    .cooperation {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      overflow-x: auto;

      .right {
        width: 50px;
        height: 50px;
      }

      .left {
        width: 50px;
        height: 50px;
      }

      .imgs {
        flex: 1;

        .imgs-ul {
          display: flex;
          gap: 17px;
          justify-content: flex-start;
          align-items: center;
          flex-direction: row;
          overflow-x: scroll;
          list-style-type: none;
          scrollbar-width: none;
          /* Firefox */
          -ms-overflow-style: none;
          /* IE 10+ */

          .imgs-li {
            flex-shrink: 0;
            width: 19%;

            .imgs-link {
              width: 100%;
              object-fit: contain;
            }
          }
        }

        ul::-webkit-scrollbar {
          display: none;
          /* Chrome Safari */
        }
      }
    }

    .choiceness {
      width: 100%;

      .title {
        width: 100%;
        height: 30px;
        font-size: 30px;
        font-weight: bold;
        color: #000000;
        line-height: 38px;
        margin: 60px 0px;
      }

      ul {
        width: 100%;
        // height: 850px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;

        .choiceness_details {
          width: 519px;
          height: 697px;
          position: relative;
          padding-bottom: 50px;

          img {
            width: 100%;
            // height: 693px;
            height: 100%;
            margin-bottom: 31px;
          }

          .choiceness_details-txt {
            font-size: 22px;
            font-weight: bold;
            color: #000000;
          }

          button {
            margin-top: 50px;
            width: 150px;
            height: 50px;
            background: #ff5757;
            border-radius: 25px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            line-height: 50px;
            border: 0;
            color: #fff;
          }
        }
      }
    }

    .bigbanner {
      width: 100%;
      position: relative;

      img {
        width: 100%;
      }

      .bannertxt {
        position: absolute;
        bottom: -45px;
        left: 0;

        h2 {
          font-size: 48px;
          font-weight: bold;
          color: #000000;
          margin-bottom: 47px;
        }

        button {
          width: 150px;
          height: 50px;
          background: #ff5757;
          border-radius: 25px;
          font-size: 24px;
          font-weight: bold;
          color: #ffffff;
          border: 0;
        }
      }
    }

    .el-divider {
      margin: 103px 0px 0px;
    }

    .wire {
      margin: 0px 0px 0px;
    }

    .choicenesstwo {
      width: 100%;
      position: relative;

      .title {
        width: 100%;
        height: 30px;
        font-size: 30px;
        font-weight: bold;
        color: #000000;
        line-height: 38px;
        margin: 60px 0px;
      }

      .ctcon {
        width: 100%;

        position: relative;
        overflow: hidden;

        ul {
          width: 100%;
          // height: 480px;

          display: flex;
          position: relative;
          // justify-content: space-between;
          // flex-flow: row wrap;

          .choicenesstwo_details {
            // flex-shrink: 0;
            // width: 30%;
            width: 545px;
            margin-right: 26px;

            img {
              width: 100%;
              margin-bottom: 40px;
            }

            p {
              width: 100%;
              // height: 25px;
              text-align: center;
              font-size: 20px;
              font-weight: 600;
              color: #000000;
            }
          }

          .choicenesstwo_details:last-child {
            margin-right: 0;
          }
        }

        .left {
          width: 46px;
          height: 46px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 20px;

          img {
            width: 46px;
            height: 46px;
          }
        }

        .right {
          width: 46px;
          height: 46px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 20px;

          img {
            width: 46px;
            height: 46px;
          }
        }
      }
    }

    .hot {
      width: 100%;

      .title {
        width: 100%;
        height: 30px;
        font-size: 30px;
        font-weight: bold;
        color: #000000;
        line-height: 38px;
        margin: 60px 0px;
      }

      .hotcon {
        width: 100%;
        // height: 650px;
        position: relative;
        // overflow: hidden;

        ul {
          // width: 100%;
          // height: 650px;
          display: flex;
          position: relative;

          .choicenesstwo_details {
            //flex-shrink: 0;
            width: 30%;
            margin-right: 20px;

            img {
              width: 100%;
              // height: 545px;
              margin-bottom: 40px;
            }

            p {
              width: 100%;
              height: 25px;
              text-align: center;
              text-align: center;
              font-size: 20px;
              font-weight: 600;
              color: #000000;
            }
          }

          .choicenesstwo_details:last-child {
            margin-right: 0;
          }
        }

        .left {
          width: 46px;
          height: 46px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 15px;

          img {
            width: 46px;
            height: 46px;
          }
        }

        .right {
          width: 46px;
          height: 46px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 15px;

          img {
            width: 46px;
            height: 46px;
          }
        }
      }
    }

    .art {
      width: 100%;
      position: relative;

      .title {
        width: 100%;
        height: 30px;
        font-size: 30px;
        font-weight: bold;
        color: #000000;
        line-height: 38px;
        margin: 60px 0px;
      }

      .artcons {
        width: 100%;
        position: relative;
        overflow: hidden;

        ul {
          display: flex;
          position: relative;

          .choicenesstwo_details {
            // flex-shrink: 0;
            width: 30%;
            // height: 753px;
            position: relative;
            margin-right: 20px;

            img {
              width: 100%;
            }

            button {
              width: 150px;
              height: 50px;
              background: #ff5757;
              border-radius: 25px;
              font-size: 24px;
              font-weight: bold;
              color: #ffffff;
              position: absolute;
              left: 13px;
              bottom: 47px;
              border: 0;
            }
          }
        }
      }

      .left {
        img {
          width: 46px;
          height: 46px;
          position: absolute;
          z-index: 2;
          top: 50%;
          transform: translateY(-50%);
          left: 20px;
        }
      }

      .right {
        img {
          width: 46px;
          height: 46px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 20px;
          z-index: 2;
        }
      }
    }
  }

  .el-form-item__content {
    display: flex;
    justify-content: center;

    .el-tabs {
      width: 420px;
    }

    .el-tabs__item {
      width: 210px;
      text-align: center;
      color: #666;
      font-size: 16px;
    }

    input {
      width: 100%;
      height: 60px;
      background: #f9f9f9;
      border-radius: 10px;
      border: 0px;
      outline: none;
      text-indent: 1em;
      margin-bottom: 20px;
    }
  }

  .dialog-footer {
    button {
      background: #ff5757;
      border-radius: 10px;
      width: 420px;
      height: 60px;
      border: 0;
    }
  }

  .el-tabs__item.is-active {
    color: #000;
    font-weight: bold;
  }

  .el-tabs__item {
    color: #666;
    font-size: 16px;
  }

  .el-tabs__active-bar {
    background-color: #ff5757;
  }

  .el-tabs__item:hover {
    color: #000;
  }
}

// @media (max-width: 768px) {
//     .home_content {
//         width: 768px;

//     }
// }
</style>
